<!--
 * @Description: 表格操作按钮
 * @Author: zhailei
 * @Date: 2021-03-17 13:22:14
 * @LastEditTime: 2021-08-11 10:01:02
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\custom\ToolBar.vue
-->
<template>
  <div
    class="toolbar flex justify-between flex-wrap"
    style="width: 100%;"
    ref="toolbars"
    v-if="!collapse"
  >
    <div
      class="table-page-search-wrapper"
      v-if="$slots.toolForm"
      :class="{ 'order-second': !(divisionBar || showDivisionBar) }"
    >
      <a-form layout="inline">
        <div class="flex justify-start flex-wrap">
          <slot name="toolForm"></slot>
          <div class="table-page-search-submitButtons flex">
            <a-button
              v-if="searchBtn"
              class="cu-btn-primary"
              icon="search"
              @click="
                () => {
                  $emit('search');
                }
              "
              >{{ $ct("search", "查询") }}</a-button
            >
            <a-button
              v-if="resetBtn"
              class="cu-btn-filter"
              icon="reload"
              @click="
                () => {
                  $emit('reset');
                }
              "
              >{{ $ct("reset", "重置") }}</a-button
            >
          </div>
        </div>
      </a-form>
    </div>
    <div
      v-if="(divisionBar || showDivisionBar) && $slots.toolForm"
      class="division-bar"
    ></div>
    <div class="table-operator" v-if="showToolBtn" style="width: 100%;">
      <slot name="toolBtn"></slot>
    </div>
  </div>
  <div class="toolbar" v-else>
    <div class="table-operator">
      <slot name="toolBtn"></slot>
    </div>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <div
          :class="[advanced ? null : 'fold', 'flex justify-start flex-wrap']"
        >
          <slot name="toolForm"></slot>
          <slot name="toolFormAdvanced" v-if="advanced"></slot>
          <div class="table-page-search-submitButtons flex">
            <a-button
              v-if="searchBtn"
              class="cu-btn-primary"
              @click="
                () => {
                  $emit('search');
                }
              "
              >{{ $ct("search", "查询") }}</a-button
            >
            <a-button
              v-if="resetBtn"
              class="cu-btn-filter"
              @click="
                () => {
                  $emit('reset');
                }
              "
              >{{ $ct("reset", "重置") }}</a-button
            >
            <a
              @click="toggleAdvanced"
              style="margin-left: 8px;line-height: 32.8px;"
            >
              {{ advanced ? "收起" : "展开" }}
              <a-icon :type="advanced ? 'up' : 'down'" />
            </a>
          </div>
        </div>
      </a-form>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "ToolBar",
  props: {
    collapse: {
      type: false,
    },
    searchBtn: {
      type: Boolean,
      default: true,
    },
    resetBtn: {
      type: Boolean,
      default: true,
    },
    showDivisionBar: {
      type: Boolean,
      default: false,
    },
    showToolBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      advanced: false,
    };
  },
  computed: {
    ...mapState("setting", ["divisionBar"]),
    slots() {
      return Object.keys(this.$slots);
    },
  },
  created() {},
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
  },
};
</script>

<style lang="less" scoped="scoped">
.division-bar {
  width: calc(100% + 20px);
  height: 10px;
  margin: 5px -10px 10px -10px;
  background-color: #f0f2f5;
}
/deep/.ant-col.ant-form-item-label {
  line-height: unset !important;
}
.order-first {
  order: 1;
}
.order-second {
  order: 2;
}
</style>
